<template>
  <div>
    <template v-if="showTemplate === 'docs' || showTemplate === 'issues'">
      <div class="flex align-items-center">
        <div class="flex-1">
          <router-link
            :to="item.path"
            target="_blank"
            class="title link block"
            v-text="item.title"
          />
          <div class="info-deep">
            <router-link
              :to="`/users/${item.author.id}`"
              target="_blank"
              class="info link"
            >
              <svg-icon icon-name="sprite_icons_profile" />
              {{ item.author.nickname }}
            </router-link>
          </div>
        </div>
        <div class="text-right">
          <div class="shrink-0 list-icons flex content-end">
            <span class="icon-holder flex align-items-center" title="点赞数">
              <svg-icon icon-name="like-fill" />
              <span>{{ item.voteCount.like }}</span>
            </span>
              <span class="icon-holder flex align-items-center" title="评论回复数">
              <svg-icon icon-name="gitlab_comments" />
              <span>{{ item.commentsCount }}</span>
            </span>
          </div>
          <timeago2 :date-time="item.created_at" pre-text="创建于 " />
        </div>
      </div>
    </template>
    <template v-if="showTemplate === 'users'">
      <div class="flex align-items-center">
        <router-link :to="`/users/${item.id}`" class="flex-1 title link flex align-items-center">
          <el-avatar :src="item.avatar" class="m-r-10" />
          {{ item.nickname }}
        </router-link>
        <span class="icon-holder flex align-items-center">
          <svg-icon icon-name="gitlab_comments" />
          <span>{{ item.commentsCount }}</span>
        </span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'activities-ranking-item',
  props: {
    type: { // 参照 activities-ranking 里面列表的类型
      type: String,
      required: true,
    },
    item: {
      type: Object,
      required: true,
    },
  },
  computed: {
    showTemplate() {
      switch (this.type) {
        case 'docs-comments': return 'docs';
        case 'issues-comments': return 'issues';
        case 'users-comments': return 'users';
        case 'docs-like': return 'docs';
        case 'issues-like': return 'issues';
        case 'files': return 'docs';
        case 'issues': return 'issues';
        default:
          console.warn('群组数据排名未传入类型');
          return undefined;
      }
    },
  },
};
</script>

<style></style>
